<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命名路由</title>
</head>
<body>
<div id="app">
    <!--<router-link to="/">首页</router-link>
    <router-link to="/user/1">用户1</router-link>
    <router-link to="/user/2">用户2</router-link>
    <router-link to="/about">关于</router-link>-->

    <!--参数 to 的值不是路径字符串的时候，需要使用动态数据绑定-->
    <router-link :to="{name: 'home'}">首页</router-link>
    <router-link :to="{name: 'user', params:{id: '1'}}">用户1</router-link>
    <router-link :to="{name: 'user', params:{id: '2'}}">用户2</router-link>
    <router-link :to="{name:'about'}">关于</router-link>

    <router-view></router-view>
</div>
<template id="user">
    <h1>User Page</h1>
    <h2>用户 {{ $route.params.id }} 的主页</h2>
    <!--  当前的路径  -->
    <div>{{ $route.path }}</div>
</template>

<script !src="" type="module">
    import {createApp} from "../../../../js/vue.esm-browser.js";
    import {defineComponent} from "../../../../js/vue.esm-browser.js";
    import {createRouter, createWebHashHistory} from "../../../../js/vue-router.esm-browser.js";

    const Home = {template: "<h1>Home Page</h1>"}
    const About = {template: "<h1>About Page</h1>"}

    // const User = {template:"<h1>User Page</h1>"}

    let User = defineComponent(
        {
            template: "#user",
            setup() {
                return {};
            }
        }
    );

    let app = createApp(
        {
            setup() {
                return {}
            }
        }
    )

    let routes = [
        {
            path: "/",
            name: "home",
            component: Home,
        },
        {
            path: "/about",
            name: "about",
            component: About,
        },
        {
            path: "/user/:id",
            name: "user",
            component: User,
            children: [
                {
                    path: "more",
                    component: {
                        template: "<h3>用户 {{ $route.params.id }} 的详细信息</h3>"
                    }
                }
            ]
        },
    ]

    let router = createRouter(
        {
            history: createWebHashHistory(),
            routes: routes,
        }
    );

    app.use(router)
    app.mount("#app")
</script>
</body>